<template>
    <div class="strategy">
        <el-table :data="tableData" border style="width: 99%" align='center'>
            <el-table-column type="expand">
                <template scope="props">  
                 <el-row>
                    <el-col :span="24" >
                        <p class="p-expanded-title"></p>
                        <p class="p-expanded-title">策略创建时间: <span class="span-expanded-content">{{props.row.createdAt.replace('.000Z','').replace('T',' ')}} </span> </p>
                        <p class="p-expanded-title">策略最后修改时间: <span class="span-expanded-content">{{props.row.updatedAt.replace('.000Z','').replace('T',' ')}}</span></p>
                        <p class="p-expanded-title">策略描述: <span class="span-expanded-content">{{props.row.describe}} </span> </p>
                    </el-col>
                 </el-row>
                    
                </template>
            </el-table-column>

            <el-table-column v-for="item in fields"
                :prop="item.info.prop" 
                :label="item.info.label"
                :align="item.style.align"
                :width="item.style.width"
                :sortable="item.info.sortable">
            </el-table-column>
            <el-table-column
                :prop="repeat_type.info.prop"
                :sortable="repeat_type.info.sortable"
                :label="repeat_type.info.label"
                :align="repeat_type.style.align"
                :width="repeat_type.style.width"
                :formatter="formatterRepeatType"
                :filters="repeat_type.filter.list"
                :filter-method="filterRepeatType"
                :filter-multiple="repeat_type.filter.multiple">
            </el-table-column>
            <el-table-column
                :prop="status.info.prop"
                :sortable="status.info.sortable"
                :label="status.info.label"
                :align="status.style.align"
                :width="status.style.width"
                :formatter="formatterStatu"
                :filters="status.filter.list"
                :filter-method="filterStatu"
                :filter-multiple="status.filter.multiple">
            </el-table-column>

            <el-table-column label="操作" align="center" v-if="checkLevel()">
                <template scope='scope'>
                    <el-checkbox style="margin-left:10px" v-model="scope.row.checked" @change='onCheckedChange((scope.row))'>启用</el-checkbox>
                    <el-button type="info" size="mini" @click='onUpdate(scope.row)'>修改</el-button>
                </template>
            </el-table-column>

       </el-table>
<!--修改策略-->
       <el-dialog title="修改策略" v-model="addFormVisible">
            <el-form :model="strategyForm" ref="strategyForm" style="width: 80%" label-width="30%">
                <el-form-item prop="name" label="策略名称" >
                    <el-input 
                        disabled
                        placeholder="请输入策略标题"
                        v-model="strategyForm.name" >
                    </el-input>
                </el-form-item>
                <el-form-item prop="describe" label="描述"
                    :rules="[{required: false}]">
                    <el-input 
                        placeholder="请输入策略描述"
                        v-model="strategyForm.describe" >
                    </el-input>
                </el-form-item>

                <el-form-item prop="integral" label="增加积分"
                    :rules="[{required: true}]">
                    <el-input 
                        placeholder="请输入增加积分"
                        v-model="strategyForm.integral" >
                    </el-input>
                </el-form-item>

                <el-form-item prop="type" label="重复周期">
                    <el-select v-model="strategyForm.repeat_type"  placeholder="请选择重复周期">
                        <el-option v-for="item in repeat_types" 
                            :key="item.value"
                            :label="item.label" 
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="repeat_number" label="最大重复次数"
                    :rules="[{required: true}]">
                    <el-input 
                        placeholder="请输入最大重复次数"
                        v-model="strategyForm.repeat_number" >
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('strategyForm')">提交</el-button>
                <el-button type="primary" @click="resetForm('strategyForm')">重置信息</el-button>
                <el-button @click="addFormVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import StrategyJs from './Strategy.js';
    module.exports = StrategyJs;
</script>
<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }     
  .p-expanded-title {
    color:#000;
  }
  .span-expanded-content {
    margin-left:10px;
    margin-right:30px;
    color:#777;
  }
</style>
